<template>
  <div >
    <div class="g-cur">
      <div class="wp">
        <NuxtLink to="/" class="a">个人中心</NuxtLink><span> / </span
        ><NuxtLink to="/" class="a">我的资产</NuxtLink><span> / </span
        ><NuxtLink to="/" class="a">资产详情</NuxtLink><span> / </span>
        <span class="s">获取纸质书籍</span>
      </div>
    </div>

    <div class="g-rowb1">
      <div class="wp">
        <div class="g-boxb1">
          <div class="m-h3">打印信息</div>
          <div class="g-infob1">
            <div class="line">
              <div class="left">
                <div class="s">打印规格：</div>
              </div>
              <div class="right">
                <div class="txt">
                  <p>
                    内饰颜色： Black&White Premium <br />
                    纸张类型： 60# Cream <br />
                    精装： 装订样式 <br />
                    封面： 光泽
                  </p>
                </div>
              </div>
            </div>
            <div class="line">
              <div class="left">
                <div class="s">书籍尺寸：</div>
              </div>
              <div class="right">
                <div class="txt">A4(8.27X11.29in /210X297mm）</div>
              </div>
            </div>
            <div class="line">
              <div class="left">
                <div class="s">书籍页数:</div>
              </div>
              <div class="right">
                <div class="txt">300页</div>
              </div>
            </div>
            <div class="line">
              <div class="left">
                <div class="s">打印数量:</div>
              </div>
              <div class="right">
                <div class="txt">
                  1 <span class="tip">*每份NFT仅支持打印1次</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="g-boxb1">
          <div class="m-h3">装运方式</div>
          <div class="g-infob1">
            <div class="line selline">
              <div class="left">
                <div class="s">选择装运方式:</div>
              </div>
              <div class="right">
                <div class="sel">
                  <a-select
                    ref="select" size="large"
                    v-model:value="valueA"
                    style="width: 360px" placeholder="请选择"
                    @change="handleChange"
                  >
                    <a-select-option value="0">方式0</a-select-option>
                    <a-select-option value="1">方式1</a-select-option>
                  </a-select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 打印订单信息 -->
        <div class="g-boxb1">
          <div class="m-h3">打印订单信息</div>
          <div class="m-tableb1">
            <a-table :columns="columns" :data-source="data" :pagination="false">
              <template #bodyCell="{ column }">
                <template v-if="column.key === 'action'">
                  <span class="opts">
                    <!-- <a v-for="item in record.action" :key="item.label">
                      {{ item.label }}
                    </a> -->
                    <a @click="visibleWl = true">查看物流</a>
                    <a>退换货</a>
                  </span>
                </template>
              </template>
            </a-table>
          </div>
          <div class="g-tips">
            <p>
              注意： 1、打印使用的第三方
              Lulu的服务，如您收到书籍存在质量问题，请点击退换货，填写lulu工单申请。<br />
              2、申请退换货需在发货后30天申请， Lulu
              对内容的质量（包括拼写错误的单词、语法错误等）、格式、设计或整体书籍外观不承担任何责任，并且不会因此原因提供退款。
            </p>
          </div>
        </div>
        <!-- 暂无收货地址 -->
        <div class="g-boxb1">
          <div class="m-h3">收货地址</div>
          <div class="g-infob1">
            <div class="line">
              <div class="left">
                <div class="s">当前暂无地址信息:</div>
              </div>
              <div class="right"></div>
            </div>
            <div class="m-addbtn" @click="visible = true">+添加收货地址</div>
          </div>
        </div>
        <!-- 已有收货地址 -->
        <div class="g-boxb1">
          <div class="m-h3">收货地址</div>
          <div class="g-infob1">
            <div class="flbox">
              <div class="ll">
                <div class="gp">
                  <div class="itm">
                    <div class="s">收货人：</div>
                    <div class="txt">赵天祥</div>
                  </div>
                  <div class="itm">
                    <div class="s">联系方式：</div>
                    <div class="txt">130****9108</div>
                  </div>
                </div>
                <div class="gp">
                  <div class="s">收货地址：</div>
                  <div class="txt">北京市北京市东城区景山街道24号</div>
                </div>
              </div>
              <div class="rr">
                <div class="edit">修改地址</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 结算信息 -->
        <div class="g-boxb1">
          <div class="m-h3">结算信息</div>
          <div class="g-infob1">
            <div class="line">
              <div class="left">
                <div class="s">打印ID：</div>
              </div>
              <div class="right">
                <div class="txt">123456789</div>
              </div>
            </div>
            <div class="line">
              <div class="left">
                <div class="s">图书小计：</div>
              </div>
              <div class="right">
                <div class="txt">6.49 USD</div>
              </div>
            </div>
            <div class="line">
              <div class="left">
                <div class="s">装运与处理：:</div>
              </div>
              <div class="right">
                <div class="txt">6.60 USD</div>
              </div>
            </div>
            <div class="line">
              <div class="left">
                <div class="s">配送费：</div>
              </div>
              <div class="right">
                <div class="txt">0.75 USD</div>
              </div>
            </div>
            <div class="line">
              <div class="left">
                <div class="s">费用总计：</div>
              </div>
              <div class="right">
                <div class="txt">
                  <span class="num">13.84 USD</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="g-botbox">
          <div class="r">
            <div class="gobtn">去下单</div>
          </div>
          <div class="l">
            <div class="txt">&nbsp;</div>
            <div class="btn">取消订单</div>
          </div>
        </div>
        <!-- 立即支付 -->
        <div class="g-botbox">
          <div class="r">
            <div class="gobtn">立即支付</div>
          </div>
          <div class="l">
            <div class="txt">实付金额：<span class="num">13.84 USD</span></div>
            <div class="btn">取消订单</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 地址弹窗 -->
    <a-modal
      v-model:visible="visible"
      centered
      title="添加收货地址"
      :width="535"
      :footer="null"
    >
      <div class="pop-edit sty1">
        <a-form :model="formState" :label-col="{ style: { width: '80px' } }">
          <a-row :gutter="10">
            <a-col :span="12">
              <a-form-item label="收货人:">
                <a-input
                  v-model:value="formState.fieldA"
                  placeholder="请输入原邮箱号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="手机号码:">
                <a-input
                  v-model:value="formState.fieldA"
                  placeholder="请输入原邮箱号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="所在地区:">
                <a-cascader
                  v-model:value="formState.value"
                  :options="formState.options"
                  placeholder="请选择所在地区"
                  change-on-select
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="详细地址:">
                <a-textarea
                  v-model:value="formState.fieldA"
                  placeholder="请输入详细地址"
                  :rows="4"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div class="dfcen">
          <div class="sbtn">保存地址信息</div>
        </div>
      </div>
    </a-modal>

    <!-- 订单物流信息弹窗 -->
    <a-modal
      v-model:visible="visibleWl"
      centered
      title="订单物流信息"
      :width="485"
      :footer="null"
    >
      <div class="pop-wl">
        <div class="top">
          <div class="img">
            <img src="" alt="">
          </div>
          <div class="info">
            <div class="line">
              <div class="s">物流公司：</div>
              <div class="p">顺丰快递</div>
            </div>
            <div class="line">
              <div class="s">快递单号：</div>
              <div class="p">SF8758959850</div>
            </div>
          </div>
        </div>
        <div class="list">
          <div class="line">
            <div class="con">
              <div class="h3">运输中 01-04 13:54</div>
              <div class="info">
                【北京市】您的包裹已到达【北京海淀中关村网点】，准备分配派送员
              </div>
            </div>
          </div>
          <div class="line">
            <div class="con">
              <div class="h3">运输中 01-04 13:54</div>
              <div class="info">
                【北京市】您的包裹已到达【北京海淀中关村网点】，准备分配派送员
              </div>
            </div>
          </div>
          <div class="line">
            <div class="con">
              <div class="h3">运输中 01-04 13:54</div>
              <div class="info">
                【北京市】您的包裹已到达【北京海淀中关村网点】，准备分配派送员
              </div>
            </div>
          </div>
          <div class="line">
            <div class="con">
              <div class="h3">运输中 01-04 13:54</div>
              <div class="info">
                【北京市】您的包裹已到达【北京海淀中关村网点】，准备分配派送员
              </div>
            </div>
          </div>
          <div class="line">
            <div class="con">
              <div class="h3">运输中 01-04 13:54</div>
              <div class="info">
                【北京市】您的包裹已到达【北京海淀中关村网点】，准备分配派送员
              </div>
            </div>
          </div>
          <div class="line">
            <div class="con">
              <div class="h3">运输中 01-04 13:54</div>
              <div class="info">
                【北京市】您的包裹已到达【北京海淀中关村网点】，准备分配派送员
              </div>
            </div>
          </div>
          <div class="line">
            <div class="con">
              <div class="h3">已揽件 01-04 13:54</div>
              <div class="info">
                【北京市】您的包裹已到达【北京海淀中关村网点】，准备分配派送员
              </div>
            </div>
          </div>
        </div>
        <div class="dfcen">
          <div class="sbtn" @click="visibleWl = false">关闭</div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>

import { reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';

const valueA = ref();

const handleChange = value => {
  console.log(`selected ${value}`);
};

// 地址弹窗
const visible = ref(false);
const formState = reactive({
  fieldA: '',
  fieldB: '',
  fieldC: '',
  value: '',
  options: [{
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [{
      value: 'hangzhou',
      label: 'Hangzhou',
      children: [{
        value: 'xihu',
        label: 'West Lake',
      }],
    }],
  }, {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [{
      value: 'nanjing',
      label: 'Nanjing',
      children: [{
        value: 'zhonghuamen',
        label: 'Zhong Hua Men',
      }],
    }],
  }]
});

const columns = [{
  title: '时间',
  dataIndex: 'time',
  key: 'time',
}, {
  title: '打印ID',
  dataIndex: 'id',
  key: 'id',
}, {
  title: '支付总计',
  dataIndex: 'total',
  key: 'total',
}, {
  title: '邮寄地址',
  key: 'address',
  dataIndex: 'address',
}, {
  title: '状态',
  key: 'status',
  dataIndex: 'status',
}, {
  title: '操作',
  key: 'action',
}];
const data = [{
  key: '1',
  time: '2024/06/10 11:40:19',
  id: 87345089590,
  total: '100USD',
  address: '北京市北京市东城区景山街道24号',
  status: '待发货',
  action: [{
    label: '查看物流',
  }, {
    label: '退换货',
  }],
}];


// 物流信息弹窗
const visibleWl = ref(false);
</script>

<style>
</style>
